<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
		<script src="../js/vue-router.js"></script>
	</head>
	<body>		
		<div id="app">
			<router-link to="/info/小红">小红个人信息</router-link>
			<router-link to="/info/小明">小明个人信息</router-link>
			<router-link to="/info/张磊">张磊个人信息</router-link>
			<router-link to="/info/张三">张三个人信息</router-link>
			<router-link to="/home">主页</router-link>
			<button @click="back" >后退</button>
			<router-view></router-view>
		</div>	
			
		<template id="t1">
			<div>
				<h3>{{this.$route.params.ids}} 个人信息页面</h3>
			</div>
		</template>
		
	<template id="login">
		<div>
			用户名：<input type="text " /> <br />
			密 码：<input type="text"  />
			<input type="button" value="登录" />			
		</div>
	</template>	
		
		<template id="home">
			<div>
				<h3>这是主页</h3>		
			</div>
		</template>	
			
	<script>
	const routes=[
		{
			path:'/info/:ids',
			component:{
				template:"#t1"
			}
		},
		{
			path:'/login',
			component:{
				template:"#login"
			}
		},
		{
			path:'/home',
			component:{
				template:"#home"
			}
		}
	]
		
	const router=new VueRouter({
		routes
	})	
		var vm=new Vue({
			el:"#app",
			data:{
				
			},
			router,
			watch:{
				$route(to,from){
					//console.log(to.path)
					//console.log(from.path)
					if(to.path=='/home'){
						router.push({path:'/login'})
					}
				}
			},
			methods:{
				back(){
					//console.log(1)
					//router.go(-100)
					router.go(3)
				}
			}
		})
		
		
	</script>		
		
		
		
		
		
		
		
	<!-- 
		
	一： router.go(n)
	这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。	
	// 在浏览器记录中前进一步，等同于 history.forward()
	router.go(1)
	
	// 后退一步记录，等同于 history.back()
	router.go(-1)
	
	// 前进 3 步记录
	router.go(3)
	
	// 如果 history 记录不够用，那就默默地失败呗
	router.go(-100)
	router.go(100)	
	 
	
	 
	 -->
	</body>
</html>
